<template>
	<view @tap="clickItemDetails(item.id)" class="tutor-item" v-for="(item,index) in tutorDetails" :key="index">
		<view class="card item">
			<view class="lt">
				<image class="image" :src="ossUrl + item.masterImg"></image>
			</view>
			<view class="rt">
				<view class="rt_top">
					<text class="name">{{item.assistantName}}</text>
					<image class="image" src="../../../static/user/icon_chu.png" v-if="isLevelIcon && item.grade"></image>
					<image class="image" src="../../../static/user/icon_zhong.png" v-if="isLevelIcon && item.grade"></image>
					<image class="image" src="../../../static/user/icon_gao.png" v-if="isLevelIcon && item.grade"></image>
					<image class="image" src="../../../static/user/icon_te.png" v-if="isLevelIcon && item.grade"></image>
				</view>
				<view class="appraise" v-if="item.tags">{{item.tags}}</view>
				<view class="time">
					<tui-icon name="clock" :size="30" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
					<text>{{item.begintime}}-{{item.endtime}}</text>
				</view>
				<view class="place">
					<tui-icon name="gps" :size="30" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
					<text>{{item.poi ?  item.poi.district+'-'+item.poi.businessAreaName : '未知'}}<text style="color: #000;padding-left: 10rpx;">距离:</text>{{(item&&item.distance || '未知')}}</text>
				</view>
				<view class="price1">
					<view class="price1_lt">
						<text>{{item.rates}}</text>
						<text class="priceTime">元/小时</text>
					</view>
					<view v-if="isInvitationButton">
						<tui-form-button @click="TutorInvite(item)" width="160rpx" height="60rpx" background="#63d6d3" radius="100rpx"><tui-icon
								margin="4rpx" size="20" color="#fff" name="alarm"></tui-icon>邀约</tui-form-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TutorTutorItem',
		emits: ['toTuorDetails','inviteTutor'],
		props: {
			// 是否显示邀约按钮
			isInvitationButton: {
				type: Boolean,
				default: true
			},
			// 是否显示级别图标
			isLevelIcon: {
				type: Boolean,
				default: true
			},
			//教练信息
			tutorDetails: {
				type: Array,
				default: []
			},
			//oss
			ossUrl:{
				type: String,
				default:''
			}
		},
		data() {
			return {

			};
		},
		methods: {
			clickItemDetails(id) {
				this.$emit("toTuorDetails",id)
			},
			TutorInvite(item){
				let ids={
					categoryId:item.categoryId,
					assistantId:item.id,
					merchantId:item.merchantId
				} 
				this.$emit("inviteTutor",ids)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tutor-item {
		background-color: #f5f5f5;
		margin-bottom: 37rpx;

		.item {
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(214, 214, 214, 0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}

		.card {
			display: flex;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.lt {
				width: 200rpx;
				height: 240rpx;
				overflow: hidden;
				/* 防止图片溢出 */
				border-radius: 20rpx;

				.image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.rt {
				padding-left: 20rpx;
				width: calc(100% - 180rpx);

				.rt_top {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.image {
					width: 28rpx;
					height: 28rpx;
				}

				.name {
					font-weight: bold;
					font-size: 28rpx;
				}

				.appraise {
					background-color: #FFF7E2;
					padding: 4rpx 6rpx;
					border-radius: 20rpx;
					width: 60%;
					text-align: center;
					font-size: 20rpx;
					color: #FF9F29;
					margin: 10rpx 0;
				}

				.time {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					color: #bbbbbb;
					margin-top: 20rpx;

					.text {
						padding-left: 4rpx;
					}
				}

				.place {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					color: #bbbbbb;
					margin: 10rpx 0;

					.text {
						padding-left: 4rpx;
					}
				}

				.price3 {
					color: red;
					font-size: 48rpx;
					display: flex;
					align-items: center;

					.priceTime {
						color: #e47e71;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}

				.price1 {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price1_lt {
						color: red;
						font-size: 48rpx;
						display: flex;
						align-items: center;

						.priceTime {
							color: #e47e71;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}

				}
			}
		}

		.card2 {
			background-color: #fff;
			border-radius: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #b2b3b3;
				padding: 20rpx;
				font-size: 24rpx;
				border-bottom: 2rpx solid #f6f6f6;

				.invite {
					color: #ed6e5e;
				}
			}

			.content {
				padding: 20rpx;
				display: flex;

				.content_lt {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					/* 防止图片溢出 */
					border-radius: 20rpx;

					.image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.content_rt {
					width: calc(100% - 140rpx);
					padding-left: 20rpx;

					.tp {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.tp_lt {
							font-weight: 600;
							font-size: 36rpx;
						}
					}

					.ct {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 16rpx 0;

						.ct_lt {
							background-color: #fef8e6;
							color: #f6b455;
							padding: 4rpx 8rpx;
							font-size: 28rpx;
							border-radius: 10rpx;
						}
					}

					.bt {
						color: #777777;
						font-size: 28rpx;
					}
				}

			}

			.bottom {
				color: #b0b1b1;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;

				.total {
					color: #646464;
					display: flex;
					align-items: center;
				}

				.totalPrice {
					color: #e25e42;
					font-weight: bold;
					font-size: 36rpx;
				}
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: calc(100% - 40rpx);
				padding: 20rpx;

				.button_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 55%;
				}
			}
		}

		.card4 {
			background-color: #fff;
			border-radius: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #b2b3b3;
				padding: 20rpx;
				font-size: 24rpx;
				border-bottom: 2rpx solid #f6f6f6;

				.invite {
					color: #ed6e5e;
				}
			}

			.content {
				padding: 20rpx;
				display: flex;

				.content_lt {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					/* 防止图片溢出 */
					border-radius: 20rpx;

					.image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.content_rt {
					width: calc(100% - 140rpx);
					padding-left: 20rpx;

					.tp_lt {
						font-weight: 600;
						font-size: 36rpx;
					}

					.ct {
						padding: 16rpx 0;
						font-size: 24rpx;

					}

					.bt {
						color: #777777;
						font-size: 28rpx;
					}
				}

			}

			.bottom {
				color: #b0b1b1;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 20rpx;

				.total {
					color: #646464;
					display: flex;
					align-items: center;
				}

				.totalPrice {
					color: #e25e42;
					font-weight: bold;
					font-size: 36rpx;
				}
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: space-between;

				padding: 20rpx;

				.button_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 55%;
				}

				.footer_lt {
					font-size: 24rpx;
					color: #e9b87a;
				}
			}
		}
	}
</style>